<template>
	<view>
		<!-- 轮播图及商品名称 -->
		<!-- <view class="wrap head-wrap">
			<carousel :image="carouselImages" />
			
			<killPriceTag price="66.00" cost="55.80" sell="2564" time="1614246441" total="5000"/>
			
			<view class="title__container">
				<view class="name__message">富强民主文明和谐自由平等公正法治爱国敬业诚信友善富强民主文明和谐自由平等公正法治爱国敬业诚信友善</view>
				<view class="sub_name__message">新老包装随机发货，敬请谅解</view>
			</view>
		</view> -->
		<view class="wrap head-wrap" v-if="TimeGoods">
			<carousel :image="TimeGoods.images" />
			
			<killPriceTag :price="TimeGoods.original_price" :cost="TimeGoods.price" :sell="TimeGoods.sales" :time="GoodEndTime" :total="TimeGoods.inventory"/>
			
			<view class="title__container">
				<view class="name__message">{{TimeGoods.goods_name}}</view>
				<view class="sub_name__message">{{TimeGoods.goods_subname}}</view>
			</view>
		</view>
		
		<!-- 规格 -->
		<view class="wrap spec-wrap flex-x">
			<view class="item12-2 spec__list">规格</view>
			<view class="item12-8 spec" @tap="openSpecToast(false)">请选择规格</view>
			<view class="item12-2 spec__icon" @tap="openSpecToast(false)">
				<i class="iconfont iconright"></i>
			</view>
		</view>
		
		<!-- 服务 -->
		<view class="wrap spec-wrap flex-x">
			<view class="item12-2 spec__list">服务</view>
			<view @tap="openToast" class="item12-8" v-if="TimeGoods">
				<!-- <span class="server__set"><i class="iconfont icon7tiantuihuan"></i>七天退换</span>
				<span class="server__set"><i class="iconfont iconanquan"></i>正品保障</span> -->
				<span class="server__set" v-for="(item,index) in TimeGoods.services"><i class="iconfont iconanquan"></i>{{item.services_name}}</span>
			</view>
			<view @tap="openToast" class="item12-2 spec__icon">
				<i class="iconfont iconright"></i>
			</view>
		</view>
		
		<!-- 商品详情选项卡 -->
		<view class="wrap bottom_wrap flex-x center item-3" v-if="TimeGoods">
			<view @tap="changeWindows(0)" class="flex-y center">
				<view>商品详情</view>
				<view :class="(0 == this.currentWindows) ? 'wrap__active' : 'wrap__unactive'" />
			</view>
			<view @tap="changeWindows(1)" class="flex-y center">
				<view>规格参数</view>
				<view :class="(1 == this.currentWindows) ? 'wrap__active' : 'wrap__unactive'" />
			</view>
			<view @tap="changeWindows(2)" class="flex-y center">
				<view>用户评价<span>({{TimeGoods.comment.length}})</span></view>
				<view :class="(2 == this.currentWindows) ? 'wrap__active' : 'wrap__unactive'" />
			</view>
		</view>
		
		<!-- 选项卡内容 -->
		<view class="wrap wrap__detail" v-if="TimeGoods">
			<!-- 商品详情 -->
			<view v-show="(0 == this.currentWindows)" class="goods_detail">
				
			</view>
			<!-- 规格参数 -->
			<view v-show="(1 == this.currentWindows)" class="goods_spec flex-x center">
				<msTable :element="TimeGoods.spec"/>
			</view>
			<!-- 用户评价 -->
			<view v-show="(2 == this.currentWindows)" class="goods__comment">
				<view v-for="(item,index) in TimeGoods.comment">
					<comments
						:head="item.path"
						:name="item.member_name"
						:comment="item.comment"
						:time="item.create_time"
						:level="item.star"
						:images="item.images"/>
					<!-- <comments
						head="http://mer.crmeb.net/uploads/def/20201210/0977b8689429d1f8f5bd785a5b2665a2.png"
						name="狗狗***" comment="嘿嘿嘿，真的不错喔"
						time="2021-02-06"
						:images="['http://mer.crmeb.net/uploads/def/20201210/0977b8689429d1f8f5bd785a5b2665a2.png' ,'http://mer.crmeb.net/uploads/def/20201210/0977b8689429d1f8f5bd785a5b2665a2.png']"/> -->
					
				</view>			
				<view class="flex-x center comment__all">
					<view @tap="allComment">
						查看全部
					</view>
				</view>
			</view>
		</view>
		
		<!-- 服务弹窗 -->
		<toast v-show="serverToast" @event="openToast">
			<view class="__toast__server" v-if="TimeGoods">
				<view class="toast-title">服务保障</view>
				<scroll-view scroll-y="true">
					<view class="server__option flex-x top" v-for="(item,index) in TimeGoods.services">
						<view class="__option_icon">
							<i class="iconfont icon7tiantuihuan"></i>
						</view>
						<view class="__option_content">
							<view class="title__option">{{item.services_name}}</view>
							<view class="remark__option">{{item.services_desc}}</view>
						</view>
					</view>
				</scroll-view>
				
				<!-- <view class="server__option flex-x top">
					<view class="__option_icon">
						<i class="iconfont iconanquan"></i>
					</view>
					<view class="__option_content">
						<view class="title__option">正品保障</view>
						<view class="remark__option">正品保障，假一赔三</view>
					</view>
				</view> -->
				
				<view class="flex-x center">
					<view @tap="openToast" class="toast__close_btn item12-10">确认</view>
				</view>
			</view>
		</toast>
		
		<!-- 规格弹窗 -->
		<toast height="75" v-show="specToast" @event="openSpecToast" v-if="TimeGoods">
			<view class="__toast__spec">
				<view class="__toast__head flex-x top">
					<view class="item12-3">
						<image :src="imagePath" mode="aspectFill" />
					</view>
					<view class="item12-8">
						<view class="toast_name">{{TimeGoods.goods_name}}</view>
						<view class="toast_price" v-if="isAll">{{DesPrice}}</view>
					</view>
					<view @tap="openSpecToast" style="margin-left: 15rpx;" class="item12-1">
						<i style="font-size: 38rpx;" class="iconfont iconchahao"></i>
					</view>
				</view>
				<scroll-view scroll-y="true">
					<view class="__toast__spec_option">
						<specOption v-for="(item ,index) in TimeGoods.spec"
							@event="optionChange"
							:key="index"
							:optionKey="index"
							v-model="optionId[index]"
							:spec="item.spec_name" :items="item.detail"/>
					</view>
					
					<view class="__toast__spec_option">
						<view class="flex-x __toast__number">
							<view class="item12-6 __number_title">
								购买数量
							</view>
							<view class="item12-6 __number_option flex-x right">
								<view @tap="numberOption(false)" class="__number_option_btn subtract">-</view>
								<view class="__set_number">{{number}}</view>
								<view @tap="numberOption(true)" class="__number_option_btn plus">+</view>
							</view>
						</view>
					</view>
				</scroll-view>
				
				<view class="__toast__make__order flex-x center">
					<view @tap="isAll?makeOrder():''" :style="{'background':isAll? '#E6B873':'#CDCDCD'}" class="item12-12 make_order__btn">确认</view>
				</view>
			</view>
		</toast>
		
		<!-- 底部栏 -->
		<bottomGroup :images="imagePath" :collect_status="goodCollect" :id="goodId" :price="goodPrice">
			<view class="flex-x center bottom__btn">
				<view @tap="openSpecToast(false)" class="time_kill__btn">立即秒杀</view>
			</view>
		</bottomGroup>
	</view>
</template>

<script>
	import carousel   from "@/components/goodsMsg/carousel.vue";
	import comments   from "@/components/goodsMsg/comments.vue";
	import msTable    from "@/components/goodsMsg/table.vue";
	import toast      from "@/components/goodsMsg/toast.vue";
	import specOption from "@/components/goodsMsg/specOption.vue";
	import coupon     from "@/components/discount-coupon/discount-coupon.vue";
	import bottomGroup from "@/components/goodsMsg/bottom/bottomGroup.vue"
	import killPriceTag from "@/components/goodsMsg/priceTag/kill.vue"
	import util from "@/common/util.js";
	
	export default {
		components: {
			comments ,
			msTable  ,
			toast    ,
			coupon   ,
			carousel ,
			specOption ,
			bottomGroup ,
			killPriceTag ,
		} ,
		data() {
			return {
				// false 加入购物车 ,true 直接购买
				isBuy: false ,
				number: 1 ,
				optionId: [] ,
				
				specItems: [
					{
						id: 1 ,
						name: '年份' ,
						itemDetail: [
							{id: 11 ,name: '2018'} ,
							{id: 12 ,name: '2019'} ,
							{id: 13 ,name: '2020'} ,
							{id: 14 ,name: '2021'}
						]
					} ,
					{
						id: 2 ,
						name: '年级' ,
						itemDetail: [
							{id: 21 ,name: '高一'} ,
							{id: 22 ,name: '高二'} ,
							{id: 23 ,name: '高三'}
						]
					} 
				] ,
				
				serverToast: false ,
				specToast: false ,
				
				currentWindows: 2 ,
				carouselImages: [
					'http://img30.360buyimg.com/popWaterMark/jfs/t487/29/112057460/48473/c0a72016/544f71e6Ne63050ff.jpg' ,
					'http://img30.360buyimg.com/popWaterMark/jfs/t1/135493/13/4491/115414/5f0e6347E6a6e0b0e/679419734cf10e4b.jpg' ,
					'http://img30.360buyimg.com/popWaterMark/jfs/t10675/253/1344769770/66891/92d54ca4/59df2e7fN86c99a27.jpg'
				],
				goodId:0, //商品ID
				goodPrice:0, //商品价格
				TimeGoods:null, //限时商品
				DesPrice:'请选择规格', //实际消费价格
				imagePath:null, //商品主图
				GoodEndTime:null, //商品结束时间
				goodCollect:0, //商品收藏状态
				isAll: false, //商品规格全选
			}
		} ,
		computed: {
		} ,
		onLoad(e) {
			this.goodId = JSON.parse(e.data).id
			this.goodPrice = JSON.parse(e.data).price
			console.log('商品ID',this.goodId);
			console.log('商品价格',this.goodPrice);
			this.TimeGood()
		},
		created() {
			
		},
		methods: {
			//限时秒杀商品详情
			TimeGood(){
				/* let resData = {
					activities:2
				} */
				this.$shopApi.apiPost('font/goods/info/'+this.goodId).then(res => {
					console.log('res',res);
					const DATA = res.data
					if(DATA.code == 200){
						this.TimeGoods = DATA.data.goods
						this.TimeGoods.comment = this.TimeGoods.comment.slice(0,2)
						this.GoodEndTime = DATA.data.end_time
						this.goodCollect = this.TimeGoods.collect_status
						this.imagePath = this.util.getMainImage(this.TimeGoods.images)
					}
				})
			},
			changeWindows: function (key) {
				this.currentWindows = key
			},
			
			openToast: function () {
				this.serverToast = !this.serverToast
			},
			openSpecToast: function (isBuy) {
				this.isBuy = isBuy
				this.specToast = !this.specToast
			} ,
			makeOrder: function () {
				console.log(this.isBuy ? '直接购买' : '加入购物车')
				//选择商品后排序ID组合，小的在前，大的在后
				this.optionId = this.optionId.sort()
				console.log(this.number)
				this.specToast = false
				this.DesPrice = this.util.spec(this.optionId,this.TimeGoods)
				if(this.DesPrice==undefined){
					this.DesPrice = '请选择规格'
				}else{
					this.DesPrice = this.DesPrice.cost
				}
				console.log('price',this.DesPrice);
			},
			optionChange: function (id ,key) {
				this.optionId[key] = id
				this.isAll = false;
				if(this.optionId.length == this.TimeGoods.spec.length){
					this.isAll = true;
					this.DesPrice = this.util.spec(this.optionId,this.TimeGoods).price
				}
				console.log(this.optionId);
			},
			numberOption: function (is_plus) {
				this.number = this.number + (is_plus ? 1 : -1)
				this.number = this.number <= 0 ? 1 : this.number
			} ,
			// 领取优惠
			couponGet: function () {
				
			} ,
			allComment: function () {
				// 跳转到全部评论
			}
		}
	}
</script>

<style>
	@import url("./style/common-detail.css");
	
	.time_kill__btn {
		width: 100%;
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#D11425), to(#EA372E));
		padding: 16rpx;
	}
</style>
